<template>
	<view class="container">
		<view class="body">
			<!-- 店铺 -->
			<view class="b-box">
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn">
						<picker class="card-box-body-picker" @change="selectShop" :value="shopIndex" :range="shopList"
							range-key="name_text">
							<view class="list-conten">
								<view class="list-con-item list-con-left">
									<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000"
										size="18">
									</uni-icons>
									活动店铺
								</view>
								<view class="list-con-item list-con-right">

									{{shopIndex > -1 ? shopList[shopIndex].name_text : '选择店铺'}}

									<uni-icons type="arrowright"></uni-icons>
								</view>
							</view>
						</picker>
					</view>
					<view class="card-box-body card-box-body-cloumn">
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>
								活动类型
							</view>
							<view @tap.stop="jump('/pages/goods/explain')"
								class="list-con-item list-con-right flc-text">
								什么是返利餐？
							</view>
						</view>
						<view class="list-conten" style="margin-bottom: 30rpx;">
							<!-- <view class="list-con-item list-con-left">
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>
								活动类型
							</view> -->
							<view class="list-con-item list-con-right flc-box">
								<view class="flc" @tap.stop="changeGoodsType(1)"
									:class="goodsTypeIndex == 1 ? 'flc-active' : ''">
									<view class="flc-t">霸王餐</view>
									<view class="flc-b">96%商家选择</view>
								</view>
								<view class="flc" @tap.stop="changeGoodsType(2)"
									:class="goodsTypeIndex == 2 ? 'flc-active' : ''">
									<view class="flc-t">返利餐餐</view>
									<view class="flc-b">54%商家选择</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 活动配置 -->
			<view class="b-box">
				<view class="card-box-head u-flex u-col-center">
					活动配置
				</view>
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn">
						<view class="list-conten" style="display: none;">
							<view class="list-con-item list-con-left">
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>
								是否开启活动
							</view>
							<view class="list-con-item list-con-right">
								<switch :checked="!!model.status" @change="changeStatus" color="#ff9000" />
							</view>
						</view>
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>
								订单金额(10-100元)
							</view>
							<view class="list-con-item list-con-right">
								<uni-number-box v-model="model.normal_rich_fee" :min="1" background="#FF9000"
									color="#fff" />
							</view>
						</view>
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>
								返现金额(10-100元)
							</view>
							<view class="list-con-item list-con-right">
								<uni-number-box v-model="model.normal_rich_desc" :min="min" background="#FF9000"
									color="#fff" />
							</view>
						</view>
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>
								每日活动名额
							</view>
							<view class="list-con-item list-con-right">
								<uni-number-box v-model="model.total" :min="1" background="#FF9000" color="#fff" />
							</view>
						</view>
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18">
								</uni-icons>
								活动地区
							</view>
							<view class="list-con-item list-con-right">
								<picker mode="region" @change="bindRegionChange" :value="model.region">
									<view class="picker">
										{{model.region[0]}} {{model.region[1]}} {{model.region[2]}}
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 时间配置 -->
			<view class="b-box">
				<view class="card-box-head u-flex u-col-center">
					时间配置
				</view>
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn">
						<picker class="card-box-body-picker" mode="date" :value="model.start_time" :start="startDate"
							:end="endDate" @change="bindDateChangeStart">
							<view class="list-conten">
								<view class="list-con-item list-con-left">
									<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000"
										size="18">
									</uni-icons>
									开始时间
								</view>
								<view class="list-con-item list-con-right">
									{{model.start_time}}
									<uni-icons type="arrowright"></uni-icons>
								</view>
							</view>
						</picker>
						<picker class="card-box-body-picker" mode="date" :value="model.end_time"
							:start="model.start_time" :end="endDate" @change="bindDateChangeEnd">
							<view class="list-conten">
								<view class="list-con-item list-con-left">
									<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000"
										size="18">
									</uni-icons>
									结束时间
								</view>
								<view class="list-con-item list-con-right">
									{{model.end_time}}
									<uni-icons type="arrowright"></uni-icons>
								</view>
							</view>
						</picker>
						<picker class="card-box-body-picker" mode="time" :value="model.today_start" start="00:01"
							end="23:59" @change="bindTimeChangeStart">
							<view class="list-conten">
								<view class="list-con-item list-con-left">
									<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000"
										size="18">
									</uni-icons>
									每日开始时间
								</view>
								<view class="list-con-item list-con-right">
									{{model.today_start}}
									<uni-icons type="arrowright"></uni-icons>
								</view>
							</view>
						</picker>
						<picker class="card-box-body-picker" mode="time" :value="model.today_end"
							:start="model.today_start" end="23:59" @change="bindTimeChangeEnd">
							<view class="list-conten">
								<view class="list-con-item list-con-left">
									<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000"
										size="18">
									</uni-icons>
									每日结束时间
								</view>
								<view class="list-con-item list-con-right">
									{{model.today_end}}
									<uni-icons type="arrowright"></uni-icons>
								</view>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- 返积分条件 -->
			<view class="b-box">
				<view class="card-box-head u-flex u-col-center">
					返积分条件
				</view>
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn">
						<view v-for="(item,index) in goodsFeedback" :key="index" class="list-conten"
							@tap.stop="changeNoFeedback(item)"
							v-if="goodsTypeIndex == 1 || (goodsTypeIndex == 2 && index == 0)">
							<view class="list-con-item list-con-left"
								:class="model.no_feedback == item.index ? 'list-con-active' : ''">
								<uni-icons style="margin-right: 10rpx;"
									:type="model.no_feedback  == item.index ? 'circle-filled' : 'circle'"
									color="#ff9000" size="18">
								</uni-icons>
								{{item.text}}
							</view>
						</view>
						<!-- <view class="list-conten" @tap.stop="changeNoFeedback(1)">
							<view class="list-con-item list-con-left"
								:class="model.no_feedback ? 'list-con-active' : ''">
								<uni-icons style="margin-right: 10rpx;"
									:type="model.no_feedback ? 'circle-filled' : 'circle'" color="#ff9000" size="18">
								</uni-icons>
								无需反馈
							</view>
						</view>
						<view class="list-conten" @tap.stop="changeNoFeedback(0)">
							<view class="list-con-item list-con-left"
								:class="!model.no_feedback ? 'list-con-active' : ''">
								<uni-icons style="margin-right: 10rpx;"
									:type="!model.no_feedback ? 'circle-filled' : 'circle'" color="#ff9000" size="18">
								</uni-icons>
								优质反馈（需含图）
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 其他 -->
			<view class="b-box">
				<view class="card-box-head u-flex u-col-center">
					其他
					<!-- <uni-icons type="arrowright"></uni-icons> -->
				</view>
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn">
						<view class="list-conten">
							<view class="list-con-item list-con-left">
								<!-- <uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000" size="18"> -->
								</uni-icons>
								特别说明
							</view>
							<view class="list-con-item list-con-right tbsm">
								<input v-model="model.tip" placeholder="请输入特别说明" maxlength="150" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 同意协议 -->
			<view class="b-box">
				<view @tap.stop="changeXiYi" class="card-box-head u-flex u-col-center card-box-xieyi">
					<uni-icons style="margin-right: 10rpx;" :type="xieyiStatus ? 'circle-filled' : 'circle'"
						color="#ff9000" size="20">
					</uni-icons>
					<view class="xieyi" @tap.stop="goXieYi">同意并遵守<text>《霸王餐平台商家协议》</text></view>
				</view>
			</view>
		</view>
		<!-- <button class="button" type="primary" @click="toggle('center')"><text class="button-text">居中</text></button> -->
		<view class="sub">
			<button :loading="requestIng" :disabled="requestIng" @tap.stop="createGoods">提交</button>
		</view>
		<view class="pop-box">
			<!-- 普通弹窗 -->

			<uni-popup ref="popup" background-color="#fff" @change="change" :is-mask-click="false">
				<t-pop title="费用详情" :tip="tip" :body="popData" @cance="cance" @close="cance" @confirm="confirm"></t-pop>
				<!--<view class="popup-content">
					<view class="popup-content-title">
						<view class="popup-content-title-tt">费用详情</view>
						<view class="popup-content-title-tip">
							注：暗示法司法所法法师法是大法师打发舒服舒服三顿饭胜多负少发顺丰手动蝶阀是否萨斯发顺丰暗室逢灯发的阿道夫大师傅俺的发发电房</view>
					</view>
					<view class="popup-content-body">
						<view class="popup-content-body-item" style="border-bottom: 1px solid #eee;">
							<view class="popup-content-body-item-child font-24">
								饿了么活动
							</view>
							<view class="popup-content-body-item-child font-28">
								<view>15元*20名</view>
								<view>300元</view>
							</view>
						</view>
						<view class="popup-content-body-item ">
							<view class="popup-content-body-item-child font-24">
								待支付
							</view>
							<view class="popup-content-body-item-child font-28">
								<view>余额支付</view>
								<view>360元</view>
							</view>
						</view>
					</view>
					<view class="popup-content-footer">
						<view class="popup-content-footer-item popup-content-footer-cance">取消</view>
						<view class="popup-content-footer-item popup-content-footer-confirm">确认发布</view>
					</view>
				</view>-->
			</uni-popup>
		</view>
		<block v-if="selectId && selectId > 0">
			<t-menu></t-menu>
		</block>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				model: {
					shop_id: 0,
					status: 1,
					total: 3,
					normal_rich_fee: 15,
					normal_rich_desc: 12,
					// start_time: this.getDate('start'),
					start_time: '请选择开始时间',
					end_time: '请选择结束时间',
					today_start: '09:30',
					today_end: '23:59',
					no_feedback: 1,
					tip: '',
					region: ['请选择地区', '请选择城市', '请选择区县']
				},
				shopIndex: -1,
				xieyiStatus: 0,
				requestIng: false,
				tip: '扣除余额会进入冻结，用户完成后会从冻结部分扣除活动返现金额；在活动结束后且报名均已上传凭证后，剩余金额会返还至余额账户',
				goods: null,
				goodsTypeIndex: 1,
				/* popData: [{
						title: '饿了么平台',
						child: ['15*20名', '300元']
					},
					{
						title: '待支付',
						child: ['余额支付', '360元']
					},
				] */
			}
		},
		computed: {
			...mapGetters(['shopList', 'currentShopIndex', 'userInfo', 'goodsFeedback']),
			min: {
				get() {
					let min = this.goodsFeedback[this.model.no_feedback].min;
					if (this.goodsTypeIndex == 1) min = 10;
					return min;
				},
				set(val) {
					console.log('min-set', val)
				}
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			popData() {
				let popData = [];
				if (this.goods) {
					popData = [
						{
							title: this.goods.wm_type == 1 ? '美团平台' : 
								   this.goods.wm_type == 2 ? '饿了么平台' : 
								   this.goods.wm_type == 3 ? '京东平台' : '未知平台',
							child: [
								`${this.goods.normal_rich_desc}*${this.goods.total}名`,
								parseFloat(parseFloat(this.goods.normal_rich_desc) * parseInt(this.goods.total)).toFixed(2) + '元'
							],
							child2: [
								'手续费',
								parseFloat(parseFloat(this.userInfo.unit_price) * parseInt(this.goods.total)).toFixed(2) + '元'
							]
						},
						{
							title: '待支付',
							child: [
								uni.getStorageSync('select_id') && uni.getStorageSync('select_id') > 0 ? '总金额' : '余额支付',
								parseFloat((parseFloat(this.userInfo.unit_price) + parseFloat(this.goods.normal_rich_desc)) * parseInt(this.goods.total)).toFixed(2) + '元'
							]
						}
					];
				}
				return popData;
			}
		},
		watch: {
			goodsTypeIndex(newVal, oldVal) {
				if (newVal == 1) {
					this.model.no_feedback = 1
					if (this.model.normal_rich_desc < 10) this.model.normal_rich_desc = 10;
				} else {
					this.model.no_feedback = 0
				}
			}
		},
		onLoad(e) {
			if (e?.id && e.id > 0) {
				this.getGoodsInfo(e.id);
			}
			this.model.start_time = this.getDate('start');
			this.model.end_time = this.getDate(3);
		},
		onHide() {
			this.cance();
		},
		methods: {
			jump(url) {
				this.$util.jump(url);
			},
			selectShop(e) {
				this.shopIndex = e.detail.value
				this.model.shop_id = this.shopList[this.shopIndex].id
			},
			changeGoodsType(index) {
				this.goodsTypeIndex = index;
			},
			changeStatus(e) {
				this.model.status = e.detail.value ? 1 : 0
			},
			bindDateChangeStart(e) {
				this.model.start_time = e.detail.value
			},
			bindDateChangeEnd(e) {
				this.model.end_time = e.detail.value
			},
			bindTimeChangeStart(e) {
				this.model.today_start = e.detail.value
			},
			bindTimeChangeEnd(e) {
				this.model.today_end = e.detail.value
			},
			changeNoFeedback(item) {
				if (this.model.normal_rich_desc < item.min) return this.$util.msg(item.text + '最低返现' + item.min + '元');
				this.model.no_feedback = item.index
			},
			changeXiYi() {
				this.xieyiStatus = Math.abs(this.xieyiStatus - 1)
			},
			goXieYi() {
				this.$util.jump('/pages/index/richtext?id=21')
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year;
				} else if (type === 'end') {
					year = year + 3;
				} else {
					let nowTime = date.getTime() //当前时间戳
					let futureTime = Math.abs(nowTime) + (type * 24 * 60 * 60 * 1000) //days天后的时间戳
					let futureDate = new Date(futureTime);
					year = futureDate.getFullYear();
					month = futureDate.getMonth() + 1;
					day = futureDate.getDate();
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				console.log(type, `${year}-${month}-${day}`)
				return `${year}-${month}-${day}`;
			},
			createGoods() {
				let that = this;
				if (that.xieyiStatus != 1) {
					that.$util.msg('请确认协议')
					return
				};
				
				// 检查是否选择了店铺
				if (!that.model.shop_id || that.model.shop_id === 0 || that.shopIndex === -1) {
					that.$util.msg('请选择店铺')
					return
				};
				
				// 检查是否选择了地区
				if (!Array.isArray(that.model.region) || that.model.region[0] === '请选择地区') {
					that.$util.msg('请选择地区')
					return
				}
				
				// 数据预处理
				let regionArr = [];
				if (Array.isArray(that.model.region)) {
					regionArr = that.model.region;
				} else if (typeof that.model.region === 'string') {
					regionArr = that.model.region.split(',');
				}
				let province = regionArr[0] || '';
				let city = regionArr[1] || '';
				let area = regionArr[2] || '';
				
				let requestData = {
					shop_id: Number(that.model.shop_id),
					status: Number(that.model.status),
					total: Number(that.model.total),
					normal_rich_fee: Number(that.model.normal_rich_fee),
					normal_rich_desc: Number(that.model.normal_rich_desc),
					start_time: that.model.start_time,
					end_time: that.model.end_time,
					today_start: that.model.today_start,
					today_end: that.model.today_end,
					no_feedback: Number(that.model.no_feedback),
					tip: that.model.tip || '',
					region: Array.isArray(that.model.region) ? that.model.region.join(',') : that.model.region,
					goods_type: Number(that.goodsTypeIndex),
					province: province,
					city: city,
					area: area
				};
				
				// 检查日期时间
				if (requestData.start_time === '请选择开始时间' || requestData.end_time === '请选择结束时间') {
					that.$util.msg('请选择活动时间')
					return
				}
				
				// 在提交前打印完整的请求数据
				console.log('提交的模型数据:', JSON.stringify(requestData, null, 2));
				
				if (!that.requestIng) {
					that.$util.loading('提交中');
					that.requestIng = true;
					
					that.$http('goods.add', requestData)
						.then(res => {
							console.log('添加商品返回值', res)
							that.requestIng = false;
							uni.hideLoading();
							
							if (res.code === 1) {
								that.goods = res.data;
								that.showPop();
							} else {
								that.$util.msg(res.msg || '提交失败');
							}
						})
						.catch(err => {
							console.error('提交失败，错误信息:', err);
							that.requestIng = false;
							uni.hideLoading();
							that.$util.msg('提交失败，请稍后重试');
						});
				}
			},
			showPop() {
				this.$refs.popup.open('center')
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			confirm() {
				console.log('confirm-goods')
				let that = this;
				let selectId = uni.getStorageSync('select_id');
				if (selectId && selectId > 0) {
					!that.requestIng && ((that.$util.loading('发布中'), that.requestIng = true),
						that.$http('goods.publish', {
							id: that.goods.id
						}).then(res => {
							that.requestIng = false
							uni.hideLoading();
							if (res.code == 1) {
								that.$util.msg(res.msg || '支付成功');
								setTimeout(() => {
									// that.$store.dispatch('getUserInfo');
									that.$util.jump('/pages/index/index?ref=1',
										'reLaunch')
								}, 1000)
							}
						}).catch(err => {
							that.requestIng = false
							uni.hideLoading()
						}));
					return;
				};
				!that.requestIng && ((that.$util.loading('发布中'), that.requestIng = true),
					that.$http('goods.pay', {
						id: that.goods.id
					}).then(res => {
						console.log('余额支付返回值', res)
						that.requestIng = false
						uni.hideLoading()
						if (res.code == 1) {
							that.$util.msg(res.msg || '支付成功');
							setTimeout(() => {
								that.$store.dispatch('getUserInfo');
								that.$util.jump('/pages/index/index?ref=1', 'reLaunch')
							}, 1000)
							// resolve(true);
						} else if (res.code == -1) {
							that.$util.msg(res.msg || '余额不足');
							setTimeout(() => {
								that.$util.jump('/pages/user/wallet/recharge')
							}, 1000)
							// resolve(false);
						} else if (res.code == 2) {
							//在线支付
							let data = res.data;
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: data.timeStamp,
								nonceStr: data.nonceStr,
								package: data.package,
								signType: data.signType,
								paySign: data.paySign,
								success: res => {
									console.log('支付成功', res)
									that.$util.msg(res.msg || '支付成功');
									setTimeout(() => {
										// that.$store.dispatch('getUserInfo');
										that.$util.jump('/pages/index/index?ref=1',
											'reLaunch')
									}, 1000)
								},
								fail: function(err) {
									console.log('fail:', err);
									if (err.errMsg == 'requestPayment:fail cancel') {
										//取消支付
										that.$util.msg('取消支付');
									} else {
										that.$util.msg('支付失败');
									}
								}
							})
						} else {
							that.$util.msg(res.msg || '提交失败');
							// resolve(false);
						}
					})
					.catch(err => {
						that.requestIng = false
						uni.hideLoading()
					}))
			},
			cance() {
				console.log('hidepop')
				this.$refs.popup.close()
			},
			getGoodsInfo(id) {
				let that = this;
				that.$http('goods.info', {
						id: id
					}, '加载中').then(res => {
						console.log('商品详情返回值', res)
						that.requestIng = false
						uni.hideLoading()
						if (res.code == 1) {
							let goods = res.data;
							that.model = {
								shop_id: goods.shop_id,
								status: goods.status,
								total: goods.total,
								normal_rich_fee: goods.normal_rich_fee,
								normal_rich_desc: goods.normal_rich_desc,
								// start_time: this.getDate('start'),
								start_time: that.$util.date('Y-m-d', goods.start_time),
								end_time: that.$util.date('Y-m-d', goods.end_time),
								today_start: goods.today_start_text,
								today_end: goods.today_end_text,
								no_feedback: goods.no_feedback,
								tip: goods.tip,
								region: ['请选择地区', '请选择城市', '请选择区县']
							}
							//选中店铺
							that.shopList.forEach((item, index) => {
								if (item.id == goods.shop_id) that.shopIndex = index;
							})
							//如果该商品是未审核未支付，则删除
							if (goods.is_show == '0' && goods.is_pay == '0') {
								that.$http('goods.del', {
										id: id
									})
									.then(res => {
										console.log('del', res)
									})
									.catch(err => {

									})
							}
						}
						/* if (res.code == 1) {
							that.$util.msg(res.msg || '支付成功');
							this.$store.dispatch('getUserInfo');
							setTimeout(() => {
								that.$util.jump('/pages/index/index', 'switchTab')
							}, 1000)
							resolve(true);
						} else if (res.code == -1) {
							that.$util.msg(res.msg || '余额不足');
							setTimeout(() => {
								that.$util.jump('/pages/user/wallet/recharge')
							}, 1000)
							// resolve(false);
						} else {
							that.$util.msg(res.msg || '提交失败');
							// resolve(false);
						} */

					})
					.catch(err => {
						that.requestIng = false
						uni.hideLoading()
					})
			},
			bindRegionChange(e) {
				// 确保region是一个有效的数组
				if (Array.isArray(e.detail.value) && e.detail.value.length === 3) {
					this.model.region = e.detail.value;
				} else {
					this.$util.msg('请选择完整的地区信息');
					this.model.region = ['请选择地区', '请选择城市', '请选择区县'];
				}
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style lang="scss">
	@import '../../common/style/city.css';

	.container {
		background: #eee;
		min-height: 100vh;

		.body {
			// margin: 30rpx 0 170rpx;
			margin: 30rpx 0;
			padding-bottom: 170rpx;

			.b-box {
				margin-top: 30rpx;
			}
		}

		.card-box-head {
			color: #222;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			width: 90%;
			margin-left: 5%;
			height: 50rpx;
			align-items: center;
			margin-bottom: 20rpx;
			font-weight: 700;
		}

		.card-box {
			width: 90%;
			min-height: 100rpx;
			margin: 0 5%;
			background: #FFF;
			background-size: 100% 100%;
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(213, 175, 97, 0.34);
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			z-index: 1;




			&-body {
				width: 90%;
				margin: 0 5%;
				display: flex;

				.card-box-body-picker {
					width: 100%;
					height: 100%;
				}

				.cb-wallet-item {
					display: flex;
					flex-direction: column;
					flex: 1;

					.cb-wallet-item-num {
						font-size: 40rpx;
						font-weight: 700;
					}

					.cb-wallet-item-tip {
						font-size: 28rpx;
					}
				}
			}

			&-body-cloumn {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;

				.no-shop-tip {
					color: #888;
					margin-bottom: 20rpx;
				}

				button {
					color: #ff9000;
					background: #fff;
					border: 1px solid #ff9000;
					border-radius: 37px;
					height: 74rpx;
					line-height: 74rpx;
					width: 180rpx;
					font-size: 28rpx;
				}

				.list-conten {
					display: flex;
					justify-content: space-between;
					width: 100%;
					height: 100rpx;
					align-items: center;
					font-size: 28rpx;
					color: #888;

					.list-con-item {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						color: #666;
					}

					.list-con-active {
						color: #ff9000;

					}

					.list-con-left {}

					.list-con-right {
						// color: #bbb;
						color: #333;
						font-size: 24rpx;
						font-weight: 400;
					}

					.tbsm {
						width: 75%;
						height: 80%;

						input {
							width: 100%;
							background: #fff;
							height: 80%;
						}
					}
				}
			}

			.recharge {
				height: 60rpx;
				line-height: 60rpx;

				font-weight: 600;
				font-size: 34rpx;
				color: #ff9000;
				text-align: center;

			}
		}

		.b-box .card-box-xieyi {
			font-size: 28rpx;
			font-weight: 400;
			justify-content: flex-start;

			.xieyi {
				margin-left: 10rpx;
			}

			text {
				color: #ff9000;
			}
		}
	}

	.container .card-box-body-cloumn .list-conten .flc-text {
		font-size: 30rpx;
		color: #ff9000;
		font-weight: 600;
	}

	.container .card-box-body-cloumn .list-conten .flc-box {
		width: 100%;
		display: flex;
		align-items: center;
		// margin-bottom: 20rpx;

		.flc {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			background: rgb(246, 246, 246);
			color: #333;
			box-sizing: border-box;
			margin: 10rpx;
			padding: 20rpx 10rpx;
			border-radius: 10px;

			.flc-b {
				font-size: 22rpx;
				color: #666;
			}
		}

		.flc-active {
			background: rgb(255, 244, 224);
			color: #ff9000;
			border: 1px solid rgb(255, 144, 0);

			.flc-b {
				font-size: 22rpx;
				color: #ff9000;
			}
		}
	}


	.sub {
		position: fixed;
		z-index: 2;
		background: #fff;
		height: 80rpx;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		bottom: var(--window-bottom);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		bottom: 0;
		/* #endif */
		padding: 10rpx 0;

		button {
			height: 100%;
			margin: 0 10%;
			border: none;
			background: #ff9000;
			border-radius: 80rpx;
			color: #fff;
		}

	}

	.uni-popup__wrapper {
		border-radius: 10px;
	}

	/* .pop-flex-s {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pop-flex-c {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.uni-popup__wrapper {
		border-radius: 10px;
	}


	.popup-content {
		@extend .pop-flex-c;
		width: 90vw;
		border-radius: 50px;

		// padding: 20rpx 2vw;
		.popup-content-title,
		.popup-content-body {
			padding: 0 30rpx;
		}

		.popup-content-title {
			@extend .pop-flex-c;
			margin: 20rpx 0;

			.popup-content-title-tt {
				display: flex;
				justify-content: center;
				font-size: 40rpx;
				font-weight: 700;
				color: #222;
			}

			.popup-content-title-tip {
				color: #ff9000;
				font-size: 20rpx;
				margin-top: 20rpx;
			}
		}

		.popup-content-body {
			@extend .pop-flex-c;
			margin: 20rpx 0 30rpx;

			.popup-content-body-item {
				@extend .pop-flex-c;

				.popup-content-body-item-child {
					@extend .pop-flex-s;
					height: 60rpx;
				}
			}
		}

		.popup-content-footer {
			@extend .pop-flex-s;
			border-top: 1px solid #ff9000;
			height: 80rpx;

			.popup-content-footer-item {
				@extend .pop-flex-s;
				justify-content: center;
				flex: 1;
				height: 100%;
			}

			.popup-content-footer-cance {}

			.popup-content-footer-confirm {
				background: #ff9000;
				color: #fff;
				border-radius: 0 0 10px 0;
			}
		}
	}

	.font-24 {
		font-size: 24rpx;
		color: #666;
	}

	.font-28 {
		font-size: 28rpx;
		color: #222;
		font-weight: 600;
	} */
</style>
